<template>
	<view>
		<!-- //你有待付款订单 -->
		<view class="wait_pay">
			<view class="title">
				<view class="title_text1">您有待付款订单</view>
				<view class="title_text2">00:30:00</view>
			</view>
			<view class="title2">
				<view class="title2_text1">请在30分钟内付款，超时订单将自动关闭</view>
				<view class="title2_text2">付款倒计时</view>
			</view>
		</view>
		
		<!-- 服务信息 -->
		<view class="serve_infor">
			<view class="serve_infor_title">
				<view class="serve_name">服务信息</view>
				<view class="log">
					<text class="icon iconfont">&#xe62c;</text>
				</view>
			</view>
			<!-- 服务时间 -->
			<view class="serve_time">
				<text class="serve_time_text1">服务时间:</text>
				<text class="serve_time_text2">06月02日 16:00 </text>
			</view>
			<!-- 服务地址 -->
			<view class="serve_time" style="display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;">
				<view>
					<text class="serve_time_text1">服务地址:</text>
					<text  class="serve_time_text2">成都市高新区软件园B7栋600号</text>
				</view>
				<view>
					<text class="icon iconfont">&#xe6f2;</text>
				</view>
			</view>
		</view>
		<view style="height: 10rpx; background: #EEEEEE;"></view>
		<!-- //NICE美发造型沙龙 -->
		<view class="conts">
			<view class="conts_title">
				<text class="conts_text1">店</text>
				<text class="conts_text2">NICE美发造型沙龙</text>
				<text class="icon iconfont">&#xe6f2;</text>
			</view>
			
			<view class="conts_boxs">
				<view class="pic">
					<image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1238106379,3489467593&fm=26&gp=0.jpg" mode=""></image>
				</view>
				<view style="width: 100%;">
					<view class="conts_boxs_text1">
						洗剪吹
					</view>
					<view class="conts_boxs_text2">
						<view>
							<text class="fw">服务：</text><text class="xj">洗护+裁剪+造型 </text>
						</view>
						<view class="price">
							<text>￥365</text>
						</view>
					</view>
					<view class="conts_boxs_text2">
						<view>
							<text class="fw">用时：</text><text class="xj">预计1小时 </text>
						</view>
						<view class="price">
							<text>x1</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 商品金额 -->
			<view class="shop_price">
				<view class="shop_price_text1">商品金额</view>
				<view class="shop_price_text1">￥365</view>
			</view>
			<view class="shop_price">
				<view class="shop_price_text1">其他</view>
				<view class="shop_price_text1">+￥0</view>
			</view>
			<!-- //合计 -->
			<view class="price_count">
				<view class="price_count_text1">合计支付</view>
				<view price_count_text1>
					<text style="font-size: 20rpx;">￥</text>
					<text>365</text>
				</view>
			</view>
		</view>
		<view style="height: 10rpx; background: #EEEEEE;"></view>
		<!-- 订单信息 -->
		<view class="order_infor">
			<view class="order_infor_title">
				<view class="order_text">订单信息</view>
				<view>
					<text class="icon iconfont">&#xe6a9;</text>
				</view>
			</view>
			<!-- 订单编号 -->
			<view class="order_code">
				<text class="order_code_text1">订单编号:</text>
				<text class="order_code_text2">{{order_code}}</text>
				<text class="order_copy" @click="copys">复制</text>
			</view>
			<!-- 创建时间 -->
			<view class="order_code">
				<text class="order_code_text1">创建时间:</text>
				<text class="order_code_text2">2020-04-22 12:04:22</text>
			
			</view>
			<!-- 支付方式 -->
			<view class="order_code">
				<text class="order_code_text1">支付方式:</text>
				<text class="order_code_text2">在线支付</text>
			
			</view>
			<!-- 众美积分 -->
			<view class="order_code">
				<text class="order_code_text1">众美积分:</text>
				<text class="order_code_text2">获得60点积分</text>
			
			</view>
			
		</view>
		<view style="height: 10rpx; background: #EEEEEE;"></view>
		<!-- 底部 -->
		<view class="footer">
			<view class="footer_cont">
				<view>
					<text class="icon iconfont">&#xe66d;</text>
				</view>
				<view>
					<text class="cancel_order">取消订单</text>
					<text class="now_pay">立即付款</text>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				order_code: 'CD20051200001'    
			}
			                      
		},
		methods:{
			//复制
			copys(){
				uni.setClipboardData({
					data:this.order_code,
					success:function(){
						uni.showToast({
							icon:'none',
							title:'已复制到剪贴板'
							
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	//你有待付款订单
	.wait_pay{
		padding: 25rpx;
		background: #00C6C2;
		.title{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;		
			align-items: center;
			.title_text1{
				font-size: 36rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 30rpx;
				// opacity: 0.8;
			}
			.title_text2{
				
				font-size: 34rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 30px;
				// opacity: 0.8;
			}
		
		}
		.title2{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;		
			align-items: center;
			.title2_text1{
				opacity: 0.8;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
			.title2_text2{
				opacity: 0.8;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
	//服务信息
	.serve_infor{
		padding: 34rpx 23rpx;
		background: white;
		.serve_infor_title{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.serve_name{
				
				font-size: 26rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #000000;
			}
			.log{
				.iconfont{
					color: #EEEEEE;
				}
			}
		}
		//服务时间
		.serve_time{
			.serve_time_text1{
				margin-right: 50rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #8E8E8E;
				line-height: 36rpx;
			}
			.serve_time_text2{
				
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				line-height: 36rpx;
			}
		}
	}

	.conts{
		padding: 39rpx 24rpx;
		background: white;
		.conts_title{
			display: flex;
			align-items: center;
			.conts_text1{
				display: inline-block;
				width: 36rpx;
				height: 20rpx;
				background: #00C6C2;
				border-radius: 8rpx;
				text-align: center;
				line-height: 20rpx;				
				font-size: 14rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
			.conts_text2{
				margin-left: 11rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #414141;
				margin-right: 11rpx;
			}
			.iconfont{
				color: #8E8E8E;
				font-size: 32rpx;
			}
		}
		.conts_boxs{
			display: flex;
			padding-bottom: 21rpx;
			margin-right: 24rpx;
			border-bottom: 1rpx solid #B4B4B4;
			margin-top: 34rpx;
			.pic{
				width: 130rpx;
				height: 130rpx;
				margin-right: 24rpx;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
			.conts_boxs_text1{
				width: 100%;
				font-size: 28rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #000000;
				line-height: 30rpx;
			}
			.conts_boxs_text2{
				
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
				.fw{
					
					font-size: 24rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #282828;
					line-height: 36rpx;
					
				}
				.xj{
					
					font-size: 24rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #777777;
					line-height: 36rpx;
				}
				.price{
					
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 30rpx;
				}
			}
		}
		.shop_price{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 22rpx;
			.shop_price_text1{
				
				font-size: 22rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #8E8E8E;
				line-height: 30rpx;
			}
			
		}
		.price_count{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 38rpx;
			.price_count_text1{				
				font-size: 22rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #000000;
				line-height: 30rpx;
			}
			
		}
	}
//订单信息
.order_infor{
	padding: 40rpx 23rpx;
	.order_infor_title{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		.order_text{			
			font-size: 26rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #000000;
			line-height: 30rpx;
		}
	}
	.order_code{
		display: flex;
		align-items: center;
		margin-top: 27rpx;
		.order_code_text1{			
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #8E8E8E;
			line-height: 36rpx;
			margin-right: 50rpx;
		}
		.order_code_text2{
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
			line-height: 36rpx;
			margin-right: 15rpx;
		}
		.order_copy{
			display: inline-block;
			text-align: center;
			width: 53rpx;
			height: 22rpx;
			background: #E5E5E5;
			border-radius: 8rpx;
			line-height: 26rpx;
			font-size: 16rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #000000;
		}
	}
}
.footer{
	padding: 32rpx 23rpx;
	padding-bottom: 122rpx;
	.footer_cont{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		.cancel_order{
			display: inline-block;
			width: 145rpx;
			height: 58rpx;
			border: 1rpx solid #979797;
			border-radius: 4rpx;
			text-align: center;
			line-height: 58rpx;			
			font-size: 26rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #414141;
			margin-right: 30rpx;
		}
		.now_pay{
			display: inline-block;
			width: 141rpx;
			height: 58rpx;
			background: #00C6C2;
			border-radius: 4px;
			text-align: center;
			line-height: 58rpx;
			
			font-size: 26rpx;
			font-family: PingFang;
			font-weight: 500;
			color:white;
		}
	}
}
</style>
